<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right;">
            <el-input v-model="uname" placeholder="请输入你要搜索的网名" @input="selectPage(1)" />
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="50px" />
          <el-table-column prop="username" label="用户名" width="120px" />
          <el-table-column prop="password" label="密码" />
          <el-table-column prop="user" label="权限" width="80px" />
          <el-table-column prop="name" label="姓名" width="80px" />
          <el-table-column prop="uname" label="网名" />
          <el-table-column prop="gender" label="性别" width="60px" />
          <el-table-column prop="telephone" label="电话" />
          <el-table-column prop="card" label="身份证" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="primary" @click="selectById(scope.row.id)">修改</el-button>
              <el-popconfirm title="你确定要删除该用户吗?" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                @confirm="deleteByid(scope.row.id)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination background layout="prev, pager, next" v-model:current-page="pageInfo.pageNum"
            v-model:page-count="pageInfo.pages" @updare:current-page="selectPage" />
        </el-row>

      </el-card>
    </el-col>
  </el-row>
  <!-- 修改模态框开始 -->
  <el-dialog v-model="adminUpdateDialogShow" title="修改用户信息" width="500px">
    <el-form>
      <el-form-item label="用户名" lable-width="20%">
        <el-input v-model="adminUpdate.username" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="重新输入密码" lable-width="20%">
        <el-input v-model="adminUpdate.password" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="真实姓名" lable-width="20%">
        <el-input v-model="adminUpdate.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="网名" lable-width="20%">
        <el-input v-model="adminUpdate.uname" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="性别" lable-width="20%">
        <el-input v-model="adminUpdate.gender" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="电话号" lable-width="20%">
        <el-input v-model="adminUpdate.telephone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="身份证" lable-width="20%">
        <el-input v-model="adminUpdate.card" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="adminUpdateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改模态框结束 -->

</template>


<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { ElLoading } from 'element-plus'
import adminApi from '@/api/adminApi';
//修改框
const adminUpdateDialogShow = ref(false);
//用来搜索的关键字
const uname = ref('');
const pageInfo = ref({
  total: 0,
  pageSize: 0,
  pageNum: 0
});
//被修改部门的信息
const adminUpdate = ref({
  id: '',
  username: '',
  password: '',
  user: '',
  name: '',
  uname: '',
  gender: '',
  telephone: '',
  card: ''
});

//定义方法根据mid查询部门信息
function selectById(id) {
  adminApi.selectById(id)
    .then(resp => {
      adminUpdate.value = resp.data;
      //显示修改框
      adminUpdateDialogShow.value = true;
    });
}
//修改车辆的方法

//定义方法完成部门修改
function update() {
  //开启加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.update(adminUpdate.value)
    .then(resp => {
      loading.close();//取消加载动画
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });
        //隐藏对话框
        adminUpdateDialogShow.value = false;
        //刷新表格数据
        selectPage(1);
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 2000,
        });
      }
    });
}
//定义方法删除部门
function deleteByid(id) {
  //开启加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.delete(id)
    .then(resp => {
      loading.close();//取消加载动画
      //判断-- 弹出信息-刷新表格
      if (resp.code == 10000) {
        //弹出信息
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });
        //刷新表格
        selectPage(1);
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 2000
        });
      }
    });
}





//分页查询；  
function selectPage(pageNum) {
  adminApi.selectPage(pageNum, uname.value)
    .then(resp => {
      pageInfo.value = resp.data;
    });
}
//默认查询首页
selectPage(1);
</script>

<style scoped></style>